import React from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import GameAIModel from "../../model/GameAIModel";
import './recent-ai.css'
import DefaultTeamIcon from "../../res/images/web/shared/缺省头像.png";
import {ICON_URL_PREFIX} from "../../redux/game";
import {formatDate, formatScheduleDate} from "../../utils/dateService";
import {bindEvent, getDom} from "../../utils/commonfunc";
import _ from "lodash";
import RecentAiList from "./RecentAiList/RecentAiList";

class RecentAI extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            // style: 1,
            // p1: 0,
            // p2: 0,
            // p3: 0,
            p: 0,
        }
    }

    componentDidMount() {
        // this.get(this.state.style)
        // this.bindScrollEvent()
        this.get()
    }


    bindScrollEvent = () => {
        const ctn = getDom('.am-tabs-pane-wrap-active')
        const top = ctn.scrollTop

        const ScrollHei = ctn.scrollHeight
        const clientHei = ctn.clientHeight
        const gap = ScrollHei - top - clientHei
        const scrollCallback = _.throttle(() => {
            // const content = this.ctnContent
            // const contentHeight = content.scrollHeight
            // const afterScrollHeight = document.documentElement.clientHeight - 64 - 43.5
            // const top = ctn.scrollTop
            // if (top > 0 && afterScrollHeight < contentHeight) {
            //     this.props.setAtTop(false)
            // } else if (top === 0) {
            //     this.props.setAtTop(true)
            // }

        }, 100)
        if (ctn) {
            bindEvent(ctn, 'scroll', scrollCallback)
        }
    }

    get = () => {
        this.props.doGetAIResultList({
            p: this.state.p,
        })
        // const p1 = this.state.p1
        // const p2 = this.state.p2
        // const p3 = this.state.p3
        // const ps = [p1, p2, p3]
        // const p = ps[style - 1]
        // let styleDate = this.props.game.aiResult[style]
        // if (styleDate) {
        //     const list = styleDate[p]
        //     if (list === undefined) {
        //         this.props.doGetAIResultList({
        //             p,
        //             style,
        //         })
        //     }
        // } else {
        //     this.props.doGetAIResultList({
        //         p,
        //         style,
        //     })
        // }


    }

    getNext = () => {
        this.setState({
            p: this.state.p + 1
        }, () => this.get())
        // const p1 = this.state.p1
        // const p2 = this.state.p2
        // const p3 = this.state.p3
        // const ps = [p1, p2, p3]
        // const p = ps[style - 1]
        // this.setState({
        //     [`p${style}`]: p + 1
        // }, () => this.get(this.state.style))
    }

    onTabClick = (e, i) => {
        this.setState({
            style: i + 1,
        }, () => this.get(this.state.style))
    }

    render() {
        // const tabs = [
        //     {title: '让球'},
        //     {title: '胜平负'},
        //     {title: '大小球'},
        // ]
        // const style = this.state.style
        const style = 0
        const aiResultDate = this.props.game.aiResult
        const values1 = aiResultDate[style] ? aiResultDate[style] : {}
        const list1 = []
        Object.values(values1).map(vals => {
            list1.push(...vals)
        })



        return <GoBackLayout
            title='近期预测'
            history={this.props.history}
        >

            <RecentAiList list={list1} style={this.state.style} getNext={this.getNext}/>

                {/*<TabWithCustomUnderline*/}
                {/*    tabs={tabs}*/}
                {/*    prerenderingSiblingsNumber={0}*/}
                {/*    tabBarUnderlineStyle={{border: '2px solid rgba(54,200,185,1)'}}*/}
                {/*    onTabClick={(e, i) => this.onTabClick(e, i)}*/}
                {/*    animated={false}*/}
                {/*>*/}
                {/*    <div>*/}
                {/*        /!*{template}*!/*/}
                {/*        <RecentAiList list={list1} style={this.state.style} getNext={this.getNext}/>*/}
                {/*    </div>*/}

                {/*</TabWithCustomUnderline>*/}


        </GoBackLayout>

    }

}

const mapState = state => ({
    game: state.game,
})

const mapDispatch = dispatch => ({
    doGetAIResultList: (payload) => dispatch.game.doGetAIResultList(payload),
})

export default connect(mapState, mapDispatch)(RecentAI)
